import React, { PureComponent } from 'react'
import { Modal, Form, Select, Input } from 'antd'
import PropTypes from 'prop-types'

// import Style from './refundModal.css'

const { Item } = Form
const { Option } = Select
const { TextArea } = Input

class refundModal extends PureComponent {
  static propTypes = {
    visible: PropTypes.bool,
    onOk: PropTypes.func,
    onCancel: PropTypes.func,
    form: PropTypes.object,
    confirmLoading: PropTypes.bool
  }

  constructor (props) {
    super(props)
    this.state = {
    }
  }

  handleOnOk = () => {
    const { form, onOk } = this.props
    form.validateFields((err, values) => {
      if (!err) {
        console.log('refundModal -> handleOnOk -> values', values)

        onOk({
          ...values,
          refundAmount: Math.floor(values.refundAmount * 100)
        })
      }
    })
  }

  handleCancel = () => {
    const { onCancel } = this.props
    onCancel()
  }

  render () {
    const { visible, form, confirmLoading } = this.props
    const { getFieldDecorator, getFieldValue } = form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      }
    }
    const returnCommodityFlag = getFieldValue('returnCommodityFlag')
    const receiveCommodityFlag = getFieldValue('receiveCommodityFlag')
    return (
      <Modal
        title='处理退款'
        visible={visible}
        confirmLoading={confirmLoading}
        onOk={this.handleOnOk}
        onCancel={this.handleCancel}
      >
        <Form {...formItemLayout}>
          { /* TODO 字段名称确认 */ }

          <Item label='退款金额'>
            {getFieldDecorator('refundAmount', {
              rules: [{ pattern: /^\d*\.?\d*$/, message: '请输入正确的金额' }]
            })(<Input prefix='¥' />)}
          </Item>
          <Item label='是否退货'>
            {getFieldDecorator('returnCommodityFlag', {
              rules: [{ required: true, message: '请选择' }]
            })(<Select>
              <Option value={1}>是</Option>
              <Option value={0}>否</Option>
            </Select>)}
          </Item>
          {returnCommodityFlag === 1 && <Item label='退货原因'>
            {getFieldDecorator('returnCommodityReason', {
              rules: [{ required: true, message: '请输入退货备注' }]
            })(<TextArea />)}
          </Item>}
          {returnCommodityFlag === 1 && <Item label='是否已收货'>
            {getFieldDecorator('receiveCommodityFlag', {
              rules: [{ required: true, message: '请选择' }]
            })(<Select>
              <Option value={1}>是</Option>
              <Option value={0}>否</Option>
            </Select>)}
          </Item>}
          {returnCommodityFlag === 1 && receiveCommodityFlag === 1 && <Item label='退货物流单号'>
            {getFieldDecorator('returnLogisticsNo', {
            })(<Input
              placeholder='请输入'
            />)}
          </Item>}
          <Item label='退款备注'>
            {getFieldDecorator('remark', {
              rules: [{ required: true, message: '请输入退款备注' }]
            })(<TextArea />)}
          </Item>
        </Form>
      </Modal>
    )
  }
}

export default Form.create()(refundModal)
